<template>
  <div class="pages">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form label-width="100px" size="mini">
          <el-form-item label label-width="0">
            <el-button type="primary" v-if="!isStore" @click="Audit(2,'审核')">审核</el-button>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-button type="primary" v-if="!isStore" @click="Audit(4,'撤回')">撤回</el-button>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-button type="primary" v-if="!isStore" @click="Audit(3,'驳回')">驳回</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableSearch">
        <el-form label-width="100px" size="mini">
          <el-form-item label="活动类型：">
            <el-select v-model="selectdata.selected" placeholder="请选择">
              <el-option label="全部类型" value></el-option>
              <el-option label="会员拉新" value="0"></el-option>
              <el-option label="会员关怀" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动状态：">
            <el-select v-model="selectdata.state" placeholder="请选择">
              <el-option label="全部状态" value></el-option>
              <el-option label="未开始" value="0"></el-option>
              <el-option label="进行中" value="1"></el-option>
              <el-option label="已结束" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-select v-model="selectdata.type" placeholder="请选择">
              <el-option label="全部状态" value></el-option>
              <el-option label="已保存" value="0"></el-option>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="审核通过" value="2"></el-option>
              <el-option label="审核驳回" value="3"></el-option>
              <el-option label="已撤回" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label label-width="35px">
            <el-input v-model="selectdata.keyword" placeholder="请输入活动名称"></el-input>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-input v-model="selectdata.shopName" placeholder="请输入门店名称"></el-input>
          </el-form-item>
          <el-form-item label label-width="10px">
            <el-button type="primary" @click="searchSelect()">筛选</el-button>
          </el-form-item>
          <el-form-item label label-width="10px">
            <el-button type="primary" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column prop="activityName" label="活动名称" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="routerPush(scope.row.activityType,{showTab:0,id:scope.row.id})"
              >{{scope.row.activityName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="activityType"
            label="活动类型"
            align="center"
            :formatter="activityTypes"
          ></el-table-column>
          <el-table-column label="活动时间" align="center" width="170">
            <template slot-scope="scope">
              <span>{{scope.row.activityStartTime}} —</span>
              <span>{{scope.row.activityEndTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopNames" label="活动门店" align="center"></el-table-column>
          <el-table-column prop="activityCreater" label="创建人" align="center"></el-table-column>
          <el-table-column
            prop="activityAuditState"
            label="审核状态"
            align="center"
            :formatter="activityAuditStates"
          ></el-table-column>
          <el-table-column
            prop="activityState"
            label="活动状态"
            align="center"
            :formatter="activityStates"
          ></el-table-column>
          <el-table-column prop="url" label="链接地址" align="center" width="180"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.activityAuditState=='2'&&  scope.row.activityAuditState!='1'"
                @click="showCountDialog(scope.row.id)"
                type="text"
              >活动统计</el-button>
              <el-button
                size="mini"
                v-if="scope.row.activityAuditState!=2 && scope.row.activityAuditState!='1'&&!isStore"
                @click="routerPush(scope.row.activityType,{showTab:1,id:scope.row.id})"
                type="text"
              >编辑活动</el-button>
              <el-button
                size="mini"
                v-if="scope.row.activityAuditState!=2 && scope.row.activityAuditState!='1'"
                @click="deleteRows(scope.$index,scope.row.id)"
                type="text"
              >删除</el-button>
              <el-button
                size="mini"
                v-if="scope.row.activityAuditState!=2 && scope.row.activityAuditState!='1'"
                @click="Audit(1,'提交审核',scope.row.id)"
                type="text"
              >提交审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <page-unit :pageData="pageData" :func="tableget"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="活动统计"
      class="addshopname"
      :visible.sync="dialogTableVisible"
      :closeOnClickModal="false"
      :closeOnPressEscape="false"
    >
      <i class="el-icon-close icon" @click="dialogTableVisible=false"></i>
      <el-table
        ref="singleTable"
        :data="tableDataCount"
        highlight-current-row
        @current-change="changeFun"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="ticketName" label="优惠券标题" align="center"></el-table-column>
        <el-table-column prop="ticketSubName" label="优惠券副标题" align="center"></el-table-column>
        <el-table-column prop="ticketType" label="优惠券类型" align="center" :formatter="ticketType"></el-table-column>
        <el-table-column prop="sendCount" label="发放数量" align="center"></el-table-column>
        <el-table-column prop="receiveCount" label="领取数量" align="center"></el-table-column>
        <el-table-column prop="accountCount" label="核销数量" align="center"></el-table-column>
        <el-table-column prop="expiredCount" label="过期数量" align="center"></el-table-column>
      </el-table>
      <page-unit :pageData="pageDataCount" :func="CountPage"></page-unit>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from "@/util";
import state from "@/util/state";
import pageUnit from "@/components/Page";
import {
  findActivityListPage,
  updateActivityStatus,
  deleteActivity,
  findActivityCountPage
} from "@/api";
export default {
  computed: mapState(["merchantId", "sub", "isStore"]),
  components: { pageUnit },
  data() {
    return {
      activityTypes: state.activityType, // 活动类型
      ticketType: state.ticketType, // 优惠券类型
      activityStates: state.activityState, // 活动状态
      activityAuditStates: state.activityAuditState, // 审核状态
      dialogTableVisible: false,
      multipleSelection: [],
      selectdata: {
        selected: "",
        type: "",
        keyword: "",
        state: "",
        shopName: ""
      },
      tableDataCount: [], // 活动统计数组
      tableData: [],
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      pageDataCount: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.tableget(this.pageData.pageSize, this.pageData.currentPage);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.tableget(this.pageData.pageSize, this.pageData.currentPage);
  },
  methods: {
    // 点击活动统计
    showCountDialog(id) {
      this.countId = id;
      this.CountPage(this.pageDataCount.pageSize, 1);
      this.dialogTableVisible = true;
    },
    // 获取活动统计列表
    CountPage(pageSize, pageNum) {
      let data = {
        activityId: this.countId,
        pageSize: pageSize,
        pageNum: pageNum
      };
      findActivityCountPage(data).then(res => {
        if (res.code == 200) {
          this.tableDataCount = res.data.list;
          this.pageDataCount.totalItems = parseInt(res.data.pageTotal);
        }
      });
    },
    // 活动统计不知道干嘛用的，待定
    changeFun() {},
    // 活动多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 审核相关操作
    Audit(state, text, id) {
      let Id = [];
      if (state == 1) {
        Id.push(id);
      } else {
        if (this.multipleSelection.length !== 0) {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            Id.push(this.multipleSelection[i].id);
          }
        } else {
          this.$message.error("请先选择活动！");
          return false;
        }
      }
      let data = {
        activityAuditState: state,
        ids: JSON.stringify(Id)
      };
      updateActivityStatus(data).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.tableget(this.pageData.pageSize, this.pageData.currentPage);
        }
      });
      // .catch(error => {
      //   this.$confirm(error.response.data.msg, "提示", {
      //     type: "warning",
      //     showCancelButton: false,
      //     showConfirmButton: false,
      //     closeOnClickModal: false,
      //     closeOnPressEscape: false
      //   });
      // });
    },
    // 删除一条活动
    deleteRows(i, id) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        let postdata = {
          id: id
        };
        deleteActivity(postdata).then(res => {
          if (res.code == 200) {
            this.searchSelect();
            this.$message.success(res.msg);
          }
        });
      });
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let arr=["0","1"]
      let data = {
        pageSize: pageSize,
        pageNum: pageNum,
        companyId: this.merchantId,
        activityType: this.selectdata.selected, //活动类型
        activityName: this.selectdata.keyword,
        shopName: this.selectdata.shopName,
        activityTypeList: "0,1",
        activityAuditState: this.selectdata.type,
        activityState: this.selectdata.state,
        activityTypeList: arr.toString(), //活动类型
      };
      findActivityListPage(data).then(res => {
        if (res.code == 200) {
          this.pageData.totalItems = parseInt(res.data.totalPage);
          this.tableData = res.data.list;
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].activityStartTime = util.getdatetime(
              this.tableData[i].activityStartTime
            );
            this.tableData[i].activityEndTime = util.getdatetime(
              this.tableData[i].activityEndTime
            );
          }
        }
      });
    },
    // 重置
    reset() {
      this.selectdata.selected = "";
      this.selectdata.keyword = "";
      this.selectdata.shopName = "";
      this.selectdata.type = "";
      this.selectdata.state = "";
    },
    // 点击查询按钮
    searchSelect() {
      this.pageData.currentPage = 1;
      this.tableget(this.pageData.pageSize, this.pageData.currentPage);
    },
    // 点击查看编辑
    routerPush(type, param) {
      if (type == "0") {
        util.routerTo("/marketing-center/company-active/new-memberact", {
          showTab: param.showTab,
          id: param.id
        });
      }
      if (type == "1") {
        util.routerTo("/marketing-center/company-active/care-menberact", {
          showTab: param.showTab,
          id: param.id
        });
      }
    }
  }
};
</script>
